<template>
  <a-modal v-model="visible" title="请选择礼品卡" centered destroyOnClose @ok="handleOk">
    <a-spin :spinning="paySpinning">
      <a-checkbox-group name="checkboxGroup" v-model="result" @change="checkboxChange">
        <a-checkbox :value="item.cardNumber" :key="item.cardNumber" :disabled="item.disabled" v-for="item in list" class="gift-check">
          <div class="giftcard" :class="item.disabled ? 'gift-disable' : null">
            <span class="expire" v-if="item.soonInvalid == 'Y'">快过期</span>
            <div class="top">
              <div class="left">
                <img :src="require(`../../assets/images/brand/${item.arcBrandId}.png`)" alt="" class="brand" />
                <div>
                  <div class="name">{{ item.cardName }}</div>
                  <div class="price">面值：¥{{ item.cardValue }}</div>
                </div>
              </div>
              <div class="time">{{ item.fixEndDate }}过期</div>
            </div>
            <div class="bottom">
              <p>
                余额 <span>¥ </span> <span>{{ item.cardBalance }}</span>
              </p>
            </div>
          </div>
        </a-checkbox>
      </a-checkbox-group>
    </a-spin>
  </a-modal>
</template>
<script>
import { getOrderUsableGift, getValidGiftCard } from '@/api/box/order'
export default {
  props: ['storeIds', 'GoodsList', 'unionId', 'boxSn', 'billNo', 'boxId'],
  data() {
    return {
      visible: false,
      result: [],
      brandPages: [],
      productInfos: [],
      hasNext: false,
      list: [],
      unList: [],
      paySpinning: false,
      activeIcon: 'https://img.bzhz.jnbygroup.com/card-radio-active.png',
      inactiveIcon: 'https://img.bzhz.jnbygroup.com/card-radio.png'
    }
  },
  mounted() {
    this.getGiftCardsList()
  },
  methods: {
    show(ogResult) {
      this.visible = true
      this.result = ogResult.map(e => e.cardNumber)
    },
    getGiftCardsList() {
      this.paySpinning = true
      if (this.productInfos.length == 0) {
        this.productInfos = this.GoodsList.map(e => {
          return {
            productId: e.spuId,
            productSku: e.sku
          }
        })
      }
      let params = {
        requestData: {
          boxId: this.boxId,
          boxSn: this.boxSn,
          brandPages: this.brandPages,
          isNext: true,
          productInfos: this.productInfos,
          scrollSize: 100,
          unionId: this.unionId
          // storeIds: this.storeIds
        }
      }
      getOrderUsableGift(params).then(res => {
        if (res.code == 0) {
          this.hasNext = res.data.hasNext
          this.productInfos = res.data.productInfos
          this.list = res.data.scrollList.map(e => {
            return {
              ...e,
              disabled: false
            }
          })

          if (!res.data.hasNext) this.finished = true

          this.paySpinning = false
        }
      })
    },
    checkboxChange() {
      this.paySpinning = true
      if (this.result.length == 0) {
        for (let item of this.list) {
          item.disabled = false
        }
        this.paySpinning = false
        return
      }
      let orderItemList = this.GoodsList.map(e => {
        return {
          detailId: e.id,
          discount3: e.discount3,
          payment: e.priceActual,
          price: e.productPrice,
          productId: e.spuId,
          sku: e.sku,
          skuId: e.skuId
        }
      })
      let params = {
        requestData: {
          billNo: this.billNo,
          boxId: this.boxId,
          boxSn: this.boxSn,
          giftCardNoList: this.result,
          orderItemList: orderItemList
        }
      }
      getValidGiftCard(params).then(res => {
        if (res.code == 0) {
          let orderGiftCardList = res.data.orderGiftCardList
          for (let item of this.list) {
            let cardNumber = item.cardNumber
            item.disabled = orderGiftCardList.filter(e => e.cardNumber == cardNumber)[0].status == 0
          }
        } else {
          this.$message.warning(res.msg)
        }
        this.paySpinning = false
      })
    },
    handleOk() {
      // let list = this.list.filter(e => this.result.includes(e.cardNumber))
      let list = []
      if (this.result.length > 0) {
        for (let e of this.result) {
          let index = this.list.findIndex(item => item.cardNumber == e)
          list.push(this.list[index])
        }
      }

      this.$emit('updateGiftCards', list)
      this.visible = false
    }
  }
}
</script>

<style lang="less" scoped>
.giftcard {
  width: 343px;
  height: 148px;
  background: url(../../assets/images/giftcard-bg.png) no-repeat;
  background-size: 100% 100%;
  border-radius: 8px;
  position: relative;
  margin: 0 auto 16px;
  padding: 18px 16px;
  box-sizing: border-box;
  .expire {
    position: absolute;
    font-size: 11px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    height: 20px;
    line-height: 20px;
    background: #000000;
    border-radius: 0px 8px 0px 8px;
    width: 45px;
    text-align: center;
    right: 0.5px;
    top: 0;
  }
  .top,
  .bottom {
    display: flex;
    justify-content: space-between;
  }
  .top {
    align-items: flex-end;
    .left {
      display: flex;
      img {
        width: 37px;
        height: 37px;
        margin-right: 7px;
      }
      .name {
        font-size: 14px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #000000;
        line-height: 20px;
      }
      .price {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #848484;
        line-height: 17px;
      }
    }
    .time {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #848484;
      line-height: 17px;
    }
  }
  .bottom {
    position: absolute;
    bottom: 18px;
    p {
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #1c1c1c;
      line-height: 20px;
      span {
        font-size: 12px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #1375f2;
      }
      span:nth-child(2) {
        font-size: 16px;
      }
    }
  }
}
.gift-disable {
  opacity: 0.4;
}
/deep/.gift-check {
  margin: 0 auto;
  position: relative;
  .ant-checkbox {
    top: 98px;
    z-index: 2;
    left: 307px;
    position: absolute;
  }
  .ant-checkbox + span {
    padding: 0;
  }
  .ant-checkbox-input {
    top: 0;
  }
  .ant-checkbox-inner {
    border-radius: 10px;
    width: 20px;
    height: 20px;
  }
}
</style>

